<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
		<title>监听视频事件</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vConsole = new VConsole();
		</script>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(37, 56, 222), rgb(96, 189, 244));
			}

			.video-container {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #000000;
				width: 100%;
				height: 33vh;
			}
		</style>
	</head>
	<body>
		<p>打开vconsole查看视频的事件回调</p>
		<div class="video-container">
			<video id="video" controls="" playsinline="" webkit-playsinline="" x5-video-player-type="h5-page" src="../vtour/cats.mp4"
			 poster="./poster.png" style="height: 100%"></video>
		</div>
		<script type="text/javascript">
			var $video = $('#video');

			var handler = function(e) {
				console.log(`=== function: ${e.type}`);
				let t = e.currentTarget || e.target;
				let {
					autoplay,
					buffered,
					controls,
					controlslist,
					crossorigin,
					currentTime,
					duration,
					height,
					loop,
					muted,
					playsinline,
					poster,
					preload,
					src,
					width,
					volume
				} = t;
				// console.log({autoplay,buffered,controls,controlslist,crossorigin,currentTime,duration,height,loop,muted,playsinline,poster,preload,src,width,volume});
				console.log(`muted: ${muted}`);
			}

			$video.on('canplay', handler);
			$video.on('canplaythrough', handler);
			$video.on('complete', handler);
			$video.on('durationchange', handler);
			$video.on('emptied', handler);
			$video.on('ended', handler);
			$video.on('loadeddata', handler);
			$video.on('loadedmetadata', handler);
			$video.on('pause', handler);
			$video.on('play', handler);
			$video.on('playing', handler);
			$video.on('progress', handler);
			$video.on('ratechange', handler);
			$video.on('seeked', handler);
			$video.on('seeking', handler);
			$video.on('stalled', handler);
			$video.on('suspend', handler);
			$video.on('timeupdate', handler);
			$video.on('volumechange', handler);
			$video.on('waiting', handler);
		</script>
	</body>
</html>
